{{define "base"}}
<!DOCTYPE html>
<html lang="en">
<!-- Copyright 2018 The LUCI Authors. All rights reserved.
Use of this source code is governed under the Apache License, Version 2.0
that can be found in the LICENSE file. -->
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <title>{{block "title" .}}CIPD Packages{{end}}</title>
  <script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
    }
    a {
      text-decoration: none!important;
    }
    .info-table-key {
      width: 1px;
      white-space: nowrap;
      border-right: 1px solid #cccccc;
    }
    .md-table-key {
      font-family: monospace;
      width: 200px;
      white-space: nowrap;
    }
    .md-table-value {
      font-family: monospace;
      max-width: 0px;
      white-space: nowrap;
    }
    .md-modal-value {
      font-family: monospace;
      width: 100%;
      height: 250px;
    }
    .age-td {
      width: 6em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-right: 1px solid #cccccc;
    }
    .ref-btn {
      display: inline;
      padding: .3em .2em .4em .3em;
      margin-left: 0.1em;
      margin-right: 0.15em;
      font-size: 75%;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: .25em;
    }
    .version-link {
      font-family: monospace;
      text-decoration: none!important;
    }
  </style>
</head>

<body class="pt-2">
  <div class="container">
    <nav class="navbar navbar-expand-md navbar-light bg-light rounded border mb-2">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">CIPD Packages</a>
        <span class="navbar-text">
        {{if .IsAnonymous}}
          <a href="{{.LoginURL}}">Login</a>
        {{else}}
          {{.User.Email}} | <a href="{{.LogoutURL}}">Logout</a>
        {{end}}
        </span>
      </div>
    </nav>

    <div id="content-box">
      {{block "content" .}}{{end}}
    </div>

    <footer style="color: #cccccc;">
      <hr class="mt-1 mb-1">
      <p class="float-end small">
        Handled in {{call .HandlerDuration}}
        <span class="ms-2">Version: {{.AppVersion}}</span>
      </p>
    </footer>
  </div>
</body>

</html>
{{end}}


{{define "download-icon"}}
<svg class="bi bi-cloud-download" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M4.887 5.2l-.964-.165A2.5 2.5 0 1 0 3.5 10H6v1H3.5a3.5 3.5 0 1 1 .59-6.95 5.002 5.002 0 1 1 9.804 1.98A2.501 2.501 0 0 1 13.5 11H10v-1h3.5a1.5 1.5 0 0 0 .237-2.981L12.7 6.854l.216-1.028a4 4 0 1 0-7.843-1.587l-.185.96z"/>
  <path fill-rule="evenodd" d="M5 12.5a.5.5 0 0 1 .707 0L8 14.793l2.293-2.293a.5.5 0 1 1 .707.707l-2.646 2.646a.5.5 0 0 1-.708 0L5 13.207a.5.5 0 0 1 0-.707z"/>
  <path fill-rule="evenodd" d="M8 6a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0v-8A.5.5 0 0 1 8 6z"/>
</svg>
{{end}}


{{define "arrow-down-icon"}}
<svg class="bi bi-arrow-down-square" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
  <path fill-rule="evenodd" d="M4.646 7.646a.5.5 0 0 1 .708 0L8 10.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z"/>
  <path fill-rule="evenodd" d="M8 4.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5z"/>
</svg>
{{end}}


{{define "breadcrumbs"}}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-light p-2">
    {{range $crumb := .Breadcrumbs }}
      {{if $crumb.Last}}
      <li class="breadcrumb-item active" aria-current="page">{{$crumb.Title}}</li>
      {{else}}
      <li class="breadcrumb-item"><a href="{{$crumb.Href}}">{{$crumb.Title}}</a></li>
      {{end}}
    {{end}}
  </ol>
</nav>
{{end}}


{{define "refs-table"}}
  <h4 class="mb-3">Refs</h4>
  {{if .}}
  <div class="table-responsive">
    <table class="table table-striped table-sm">
    {{range $ref := .}}
      <tr>
        <td class="age-td">{{.Age}}</td>
        <td class="text-truncate" style="max-width: 0px;">
          <a class="btn btn-secondary ref-btn" href="{{.Href}}" title="Set by {{.User}}">
            {{.Title}}
          </a>
          <span class="ms-1">by {{.User}}</span>
        </td>
      </tr>
    {{end}}
    </table>
  </div>
  {{else}}
  <p>None</p>
  {{end}}
{{end}}


{{define "tags-table"}}
  <h4 class="mb-3">Tags</h4>
  {{if .}}
  <div class="table-responsive">
    <table class="table table-striped table-sm">
    {{range $tag := .}}
      <tr>
        <td class="age-td">{{.Age}}</td>
        <td class="text-truncate" style="max-width: 0px;">
          <a class="version-link" href="{{.Href}}" title="Set by {{.User}}">
            {{.Title}}
          </a>
        </td>
      </tr>
    {{end}}
    </table>
  </div>
  {{else}}
  <p>None</p>
  {{end}}
{{end}}
